<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/lib/bootstrap.min.css">
    <script src="static/lib/jquery-1.7.2.js"></script>
    <script src="static/lib/bootstrap.js"></script>

    <script src="static/lib/vue.js"></script>
    <script>
        $(function () {
            $('#head').load('header.html');
            $('#validate-img').attr("src","/getVerify?"+Math.random());
            $('#username').focusout(function () {
                if($('#username').val()==null||$('#username').val()==""){
                    $('#username').next('p').text("用户名不能为空");
                }else {
                    $('#username').next('p').text(" ");
                };
            })
            $('#password').focusout(function () {
                if($('#password').val()==null||$('#password').val()==""){
                    $('#password').next('p').text("密码不能为空");
                }else {
                    $('#password').next('p').text(" ");
                }
            });
            $('#validate').focusout(function () {
                if($('#validate').val()==null||$('#validate').val()==""){
                    $('#validate').next('p').text("验证码不能为空");
                }else {
                    $('#validate').next('p').text(" ");
                }
            })
        });
        function getVerify(obj){
            obj.src = "/getVerify?"+Math.random();
        }
        function login() {
            if($('#username').val()!=null&&
                $('#password').val()!=null&&
                $('#validate').val()!=null&&
                $('#username').val()!=""&&
                $('#password').val()!=""&&
                $('#validate').val()!=""){
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/login" ,//url
                    data: $('#form1').serialize(),
                    success: function (result) {
                        //console.log(result);//打印服务端返回的数据(调试用)
                        if (result.res==1) {
                            window.location.replace(result.msg + ".html");
                        }else if(result.res==2){
                            alert("验证码不正确！");
                        }else {
                            alert("用户名或密码错误！");
                        }
                    },
                    error : function() {
                        alert("异常！");
                    }
                });
            }
        }

    </script>
    <style type="text/css">
        body {background-color: #F5F5F5}
        .logo{
            padding-left: 100px;
        }

        .logo span {
            font-size: 50px;
            color: #A2A2A2;
            display: inline-block;
            position: absolute;
            top: 10px;
        }
        .motto {
            padding-left: 20px;
            margin-top: 27px;
        }

        .login{
            text-align: right;
            font-size: 16px;
            color: #A2A2A2;
            padding-right: 80px;
            margin-top: 55px;
        }
        .phone {
            padding-left:18px ;
            background:  url("./static/imgs/top-tel.jpg") left center no-repeat;
        }
        .login a {
            font-size: 16px;
            color: #A2A2A2;
        }
        .login a:link{color: #A2A2A2}		/* 未访问的链接 */
        .login a:visited {color: #A2A2A2}	/* 已访问的链接 */
        .login a:hover {color: #A2A2A2}	/* 鼠标移动到链接上 */
        .login a:active {color: #A2A2A2}

        .login-bg {
            background:#5bc0de url("static/imgs/login-bg.jpg") no-repeat;
            background-size: 100%;
            height: 890px;
        }
        .login-div {
            margin-top: 180px;
            padding-left: 50px;
            width: 520px;
        }

        .login-title {
            margin-bottom: 60px;
        }
        .login-title p {
            font-size: 50px;
            font-style: italic;
        }
        .login-title p span{
            font-size: 70px;
            font-style: italic;
        }
        .login-title span {
            font-size: 30px;
        }

        .login-form input {
            height: 50px;
            background-color:transparent;
            margin-bottom: 8px;
        }
        .login-form p {
            color: red;
            height: 16px;
            font-size: 16px;
        }
        .login-form button {
            margin-top: 18px;
        }
        .foot {
            clear: both;
            /*background-color: #29333D;*/
            text-align: center;
            color: #868686;
        }
        .foot a {
            color: #868686;
        }
        .verification {
            width: 210px;
            height: 50px;
            border: 1px #D3D3D3 solid;
            border-radius: 5px;
        }
        .login-button {
            width: 462px;
            height: 50px;
            font-size: 25px;
        }
    </style>
</head>

<div id="head" ></div>
<div class="container-fluid">
    <div class="login-bg row">
        <div class="col-sm-offset-7 col-sm-5 login-div">
            <div class="login-title">
                <p>欢迎登陆&nbsp;<span>在考</span></p>
                <span>在线考核，逢考必过。</span>
            </div>
            <div class="login-form">
                <form id="form1">
                    <div class="form-group">
                        <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                        <p>&nbsp;</p>
                    </div>
                    <div class="form-group">
                        <input type="password" id="password" name="password" class="form-control" placeholder="密码">
                        <p>&nbsp;</p>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <input type="text" id="validate" name="validate" class="form-control" placeholder="请输入验证码">
                            <p>&nbsp;</p>
                        </div>
                        <div class="col-lg-6">
                            <img onclick="getVerify(this)" id="validate-img" src="static/imgs/click.png" class="verification">
                        </div>
                    </div>
                    <button type="button" onclick="login()" class="btn btn-primary btn-lg login-button">登陆</button>


                </form>
            </div>
        </div>
    </div>
    <div class="foot">
        <hr width="80%"/>
        <p>友情连接</p>
        <span>
            <a>百度一下</a>|
            <a>沈阳日语培训班</a>|
            <a>职业技术学院</a>|
            <a>在职博士</a>|
            <a>深圳英语培训机构</a>|
            <a>辽宁自考</a>|
            <a>深圳培训机构</a>|
            <a>郑大自考</a>
        </span>
        <!--<hr/>-->
        <p>Copyright&copy;2006-2017广州腾科网络技术有限公司 All reserved 粤ICP备12042196号-1</p>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="modal1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 style="color: #46b8da">{{errortype}}</h2>
            </div>
            <div class="modal-body">
                <h3>{{errormsg}}</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</body>
</html>